//新增或编辑员工绩效计划
import { Form, Button, message, Space, Table } from 'antd';
import { useEffect, useState } from 'react';
import dayjs from 'dayjs';
import Router from "next/router"
import { http } from "@/utils/request";
import { useRouter } from 'next/router';
type TableRowSelection<T> = TableProps<T>['rowSelection'];
const detailStaffPlan = () =>{
  const router = useRouter();
  const { id, title } = router.query;
  const [detailData,setDetailData] = useState({});
  const [form] = Form.useForm();
  const [data,setData] = useState([]);
  const columns: TableColumnsType<TableDataType> = [
    {
      title: "序号",
      key: "index",
			align:'center',
      width:80,
      render: (_text, _record, index) => {
        return index + 1
      }
    },
    {
      title: "指标编码",
      dataIndex: "targetCode",
			align:'center',
      width:100,
    },
    {
      title: "指标类型",
      dataIndex: "targetTypeName",
			align:'center',
      width:100,
    },
    {
      title: "指标名称",
      dataIndex: "targetName",
			align:'center',
      width:150,
    },
    {
      title: "权重(%)",
      dataIndex: "targetWeight",
			align:'center',
      width:100,
    },
    {
      title: "指标定义",
      dataIndex: "targetContent",
			align:'center',
      width:150,
    },
    {
      title: "考核标准",
      dataIndex: "standard",
			align:'center',
      width:150,
    },
  ];
  // 获取详情
  const getDetailInfo = async()=>{
    const res = await http.get({
      url:'/pmEvaluPlan/qryById',
      params:{planId:id}
    })
    if(res.code==200){
      const data = JSON.parse(JSON.stringify(res.data));
      setDetailData(data);
      setData(data.changeItemList);
    }else{
      message.error(res.msg);
    }
  }
  // 查询上一个版本
  const getHistory = async()=>{
    const res = await http.get({
      url:'/pmEvaluPlan/qryListHistory',
      params:{changeId:detailData.changeId}
    })
    if(res.code==200){
      const data = JSON.parse(JSON.stringify(res.data));
      setDetailData(data);
      setData(data.changeItemList);
    }else{
      message.error(res.msg);
    }
  }
  useEffect(()=>{
    getDetailInfo();
  },[])
  return(
    <div>
      <div className={'title'}>{title}</div>
      {detailData.changeId && <div style={{display:'flex',justifyContent:' flex-end'}}>
        <Button type='primary' onClick={()=>getHistory()}>
          查看上一版本
        </Button>
      </div>}
      <Form
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 14 }}
        form={form}
        layout={'inline'}
        autoComplete="off"
      >
        <Form.Item name="planCode" label={'计划编号'} style={{width:'30%',marginBottom:'20px'}}>
          <span className='pl-[20px]'>{detailData.planCode}</span>
        </Form.Item>
        <Form.Item name="planName" label={'计划名称'} style={{width:'30%',marginBottom:'20px'}}>
          <span className='pl-[20px]'>{detailData.planName}</span>
        </Form.Item>
        <Form.Item name="evaluYear" label={'计划考核年度'} style={{width:'30%',marginBottom:'20px'}}>
          <span className='pl-[20px]'>{detailData.evaluYear}</span>
        </Form.Item>
        <Form.Item name="evaluFrequency" label={'计划频次'} style={{width:'30%',marginBottom:'20px'}}>
          {detailData.evaluFrequency === "10" && <span className='pl-[20px]'>年度</span>}
          {detailData.evaluFrequency === "20" && <span className='pl-[20px]'>季度</span>}
          {detailData.evaluFrequency === "30" && <span className='pl-[20px]'>月度</span>}
        </Form.Item>
        <Form.Item name="planBeginTime" label={'计划开始日期'} style={{width:'30%',marginBottom:'20px'}}>
          <span className='pl-[20px]'>{detailData.planBeginTime}</span>
        </Form.Item>
        <Form.Item name="planEndTime" label={'计划结束日期'} style={{width:'30%',marginBottom:'20px'}}>
          <span className='pl-[20px]'>{detailData.planEndTime}</span>
        </Form.Item>
        <Form.Item name="evaluObject" label={'被考核人'} style={{width:'30%',marginBottom:'20px'}}>
          <span className='pl-[20px]'>{detailData.evaluObject}</span>
        </Form.Item>
        <Form.Item name="deptLeader" label={'考核类型'} style={{width:'30%',marginBottom:'20px'}}>
          <span className='pl-[20px]'>个人</span>
        </Form.Item>
        <Form.Item name="fractionMax" label={'总分上限'} style={{width:'30%',marginBottom:'20px'}}>
          <span className='pl-[20px]'>{detailData.fractionMax}</span>
        </Form.Item>
      </Form>
      <div className={'title'}>考核明细列表</div>
      <Table
        style={{marginTop:'20px'}}
        dataSource={data}
        bordered
        pagination={false}
        columns={columns}
        rowKey={(record) => `${record.targetId}`}
      ></Table>
      <Space style={{display:'flex',justifyContent:' flex-end',marginTop:'20px'}}>
        <Button onClick={()=>{Router.push('/performancePlan/staff')}}>
          返回
        </Button>
      </Space>
    </div>
  )
}
export default detailStaffPlan;